<template>
	<view>
		<u-form  :model="activity" :rules="rules" ref="uForm" :errorType="errorType" >
			
			<view class="box2">
				<view class="profily">
					<view style="margin-top: -20px;">
						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="活动标题" label-width="150" :required="true"> <!-- icon：right-icon="kefu-ermai" -->
							<u-input :border="border" placeholder="简短的活动标题" v-model="activity.activityTitle" type="text"></u-input>
						</u-form-item>
						
						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="活动分类" label-width="150" :required="true">
							<u-input :border="border" placeholder="活动分类" v-model="activity.classificationName" type="select"  @click="classificationListShow = true" />
							<u-action-sheet :list="classificationList" v-model="classificationListShow" @click="actionClassification"></u-action-sheet>
						</u-form-item>	
						
						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="活动日期" label-width="150" :required="true">
							<u-input :border="border" placeholder="活动日期" v-model="activity.activityDate" type="select"  @click="activityDateShow = true"></u-input>
							<u-calendar v-model="activityDateShow" mode="date" @change="activityDateChange" max-date="2050-12-31"></u-calendar>
						</u-form-item>	
						
						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="费用说明" label-width="150" :required="true"> <!-- icon：right-icon="kefu-ermai" -->
							<u-input :border="border" placeholder="活动费用说明,比如AA制" v-model="activity.costDescription" type="text"></u-input>
						</u-form-item>
						
						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="联系方式" label-width="150" :required="true"> <!-- icon：right-icon="kefu-ermai" -->
							<u-input :border="border" placeholder="活动发起者联系方式" v-model="activity.contactInformation" type="text"></u-input>
						</u-form-item>
						
						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="报名截止日期" label-width="190" :required="true">
							<u-input :border="border" placeholder="报名截止日期" v-model="activity.endDate" type="select"  @click="endDateShow = true"></u-input>
							<u-calendar v-model="endDateShow" mode="date" @change="endDateChange" max-date="2050-12-31"></u-calendar>
						</u-form-item>	
						
						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="人数上限" label-width="150" :required="true"> <!-- icon：right-icon="kefu-ermai" -->
							<u-input :border="border" placeholder="人数上限" v-model="activity.peopleMax" type="text"></u-input>
						</u-form-item>
						
						<u-form-item :rightIconStyle="{color: '#888', fontSize: '50rpx'}"  :label-position="labelPosition" label="活动区域" label-width="150" :required="true">
							<u-input :border="border" placeholder="活动区域" v-model="activity.activityArea" type="select" @click="activityAreaShow = true"></u-input>
							<city-select v-model="activityAreaShow" @city-change="activityAreaChange" ></city-select>
						</u-form-item>	
						
						<u-form-item :label-position="labelPosition" label="详细地址" prop="placeName" label-width="150" required="true">
							<u-input :border="border" type="select"  v-model="activity.detailedPlace" placeholder="详细地址" @click="address"></u-input>
						</u-form-item>
					</view>
				</view>
			</view>
			
			<view class="box3">
				<view class="profily">
					<view style="margin-top: -20px; display: block;">
						<view>
							<u-form-item :label-position="labelPosition" label="详细描述" label-width="150" :required="true"></u-form-item>
							<kn-edit ref="contentEdit" showInsertImg :pageScrollTop="pageScrollTop" v-model="activity.detailedDescription"></kn-edit>
						</view>
						<view>
							<u-form-item :label-position="labelPosition" label="图片上传" label-width="150" :required="true"></u-form-item>
							 <jade-image-upload
								 :list="media"
								 :control="control"
								 :columnType="columnType"
								 :maxCount="maxCount"
								 :compressSize="compressSize"
								 :compressQuality="compressQuality"
								 :compressWidth='compressWidth'
								 :imageSize="imageSize"
								 @chooseFile="chooseFile"
								 @imgDelete="mediaDelete"
							 >
							</jade-image-upload>
						</view>
					</view>
				</view>
			</view>
			<button class="button" @click="submit">提交</button>
		</u-form>
		<view style="height: 30px;"></view>
	</view>
</template>

<script>
	import citySelect from '../../components/u-city-select/u-city-select.vue'
	//富文本编辑器
	import knEdit from '@/components/lf-kn-editor/kn_editor.vue'
	//图片上传地址
	import url from '../../common/url.js';
    export default {
		components: {
			citySelect,
			knEdit
		},
        data() {
            return {
				classificationList:[],
				classificationListShow: false,
				activityDateShow: false,
				endDateShow: false,
				activityAreaShow: false,
				activity: {
					activityTitle: '',
					activityClassification: '',
					activityDate: '',
					costDescription: '',
					contactInformation: '',
					endDate: '',
					peopleMax: '50',
					activityPlace: '',
					activityArea: '',
					detailedPlace: '',
					detailedDescription: '',
					activityPictureId: '',
					userId: this.$store.state.vuex_user.openId,
					imageUrlList: []
				},
				rules: {
					activityTitle: [
						{
							required: true, 
							message: '标题不能为空',
							trigger: 'change' ,
						}
					],
				},
				pageScrollTop: 0,
				/* 上传图片 */
				control: true,
				columnType: 'other',
				maxCount: 6,
				compressSize: 0.2,
				imageSize: 2,
				compressQuality: 0.8,
				compressWidth: 375,
				uploadTask: null,
				media: [], //数据源
				// 地图key 这个k值是你自己申请的k
				// key: 'NDZBZ-BRFKX-ZPS4C-TI2JM-VA4US-AOF2R',
				edit: 0, /* 0为添加, 1为编辑*/
            }
        },
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
        onLoad(params) {
			if(params.activityInfo != null) {
				//确定添加or编辑、详情赋值、图片urlList赋值
				this.edit = 1
				this.activity = JSON.parse(decodeURIComponent(params.activityInfo))
				
				this.activity.imageUrlList.forEach((url, index) => {
					const item = {
						status: 'success',
						progress: '上传成功',
						src: url,
					}
					this.media.splice(index, 1, item)
				})
			}
           this.getClassificationList();
        },
        methods: {
			actionClassification(index) {
				this.activity.activityClassification = index
				this.activity.classificationName = this.classificationList[index].label
			},
			activityAreaChange(e) {
				this.activity.activityArea = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			activityDateChange(e) {
				this.activity.activityDate = e.result
			},
			endDateChange(e) {
				this.activity.endDate = e.result
			},
			//获取类别列表
			async getClassificationList() {
				const params = {
					index: 1
				}
				await this.$u.api.getClassificationList(params).then(res=>{
					if(res.code == 200) {
						this.classificationList = res.data
					} else {
						uni.showToast({
							icon:"error",
							title:"类别获取失败"
						})
					}
				})
			},
			address(){
				uni.chooseLocation({
				    success:  res=> {
						this.activity.detailedPlace =res.address
			
				        // console.log('位置名称：' + res.name);
				        console.log('详细地址：' + res.address);
				        // console.log('纬度：' + res.latitude);
				        // console.log('经度：' + res.longitude);
				    }
				});
			},
			submit() {
				//封装图片UrlList
				const imageUrlList = []
				this.media.forEach(res=>{
					imageUrlList.push(res.src)
				})
				this.activity.imageUrlList = imageUrlList
				// console.log(this.imageUrlList);
				
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if(this.edit == 0) {
							this.$u.api.activityAdd(this.activity).then(res=> {
								if(res.code==200) {
									this.$u.route({
										type: 'reLaunch',
										url: 'pages/activity/activity',
									})
									uni.showToast({
										icon: 'success',
										title:"发布成功"
									})
								} else {
									uni.showToast({
										icon: 'error',
										title:"发布失败"
									})
								}
							})
						} else {
							this.$u.api.activityUpdate(this.activity).then(res=> {
								if(res.code==200) {
									this.$u.route({
										type: 'reLaunch',
										url: '/pages/activity/activity_info?activityInfo=' + encodeURIComponent(JSON.stringify(this.activity)),
									})
									uni.showToast({
										icon: 'success',
										title:"编辑成功"
									})
								} else {
									uni.showToast({
										icon: 'error',
										title:"编辑失败"
									})
								}
							})
						}
					} else {
						uni.showToast({
							icon: 'error',
							title:"请仔细填写内容哦"
						})
					}
				});
			},
			onPageScroll(e) {
				console.log(e)
				this.pageScrollTop = e.scrollTop
			},
			
			/* 上传图片 */
			
			//上传
			chooseFile(e) {
				this.uploadFileToServe(e)
			},
			//中断上传并删除
			mediaDelete(e) {
				// console.log("e = ", e);
				// console.log("this.media[e].src = ", this.media[e].src);
				//从七牛云删除
				this.$u.api.deleteImg(this.media[e].src)
				
				this.uploadTask ? this.uploadTask.abort() : ''
				this.media.splice(e,1)
			},
			//上传逻辑处理
			uploadFileToServe(urlList) {
				if (!urlList || urlList.length <= 0) {
					return
				};
				//以七牛云为例,可根据实际需求灵活调整
				urlList.forEach((item) => {
					this.uploadTask = uni.uploadFile({
						url: url.uploadUrl, //后端上传接口
						filePath: item.src,
						fileType:'image',
						name: 'image', //后台对应的参数名
						
						success: (res) => {
							let data = JSON.parse(res.data) //后端返回的数据
							if (data.code==200) {
								item.status = 'success'
								item.progress = '上传成功'
								item.src = data.data
							} else {
								item.status = 'error'
								item.progress = '上传失败'
							}
						}
					});
					this.uploadTask.onProgressUpdate((res) =>{
						item.percent = res.progress
						this.media.splice(item.index,1,item)
					})
				})
				// console.log("this.activity.imageUrlList = ", this.activity.imageUrlList);
				// console.log("this.media = ", this.media);
			}
        }
    }
</script>

<style lang="scss">
	.box2 {
		position: relative;
		padding-top: 13px;
		.profily {
			positio: absolute;
			width: 90%;
			height: 545px;
			// display: flex;
			border:1px solid #F7F7F7;
			border-radius: 10px;
			margin: 0 auto;
			top: -100upx;
			left: 5%;
			background: #FEFEFE;
			padding: 35upx;
			box-sizing: border-box;
			box-shadow: 2px 2px 5px #bebebe;
		}
	}	
	.box3 {
		position: relative;
		padding-top: 13px;
		display: flex;
		.profily {
			positio: absolute;
			width: 90%;
			// height: 500px;
			display: flex;
			border:1px solid #F7F7F7;
			border-radius: 10px;
			margin: 0 auto;
			top: -100upx;
			left: 5%;
			background: #FEFEFE;
			padding: 35upx;
			box-sizing: border-box;
			box-shadow: 2px 2px 5px #bebebe;
		}
	}
	.button {
		margin-top: 30px;
		background-color: #193867;
		color:white;
		width: 380px;
		height: 40px;
		border:0;
		font-size: 16px;
		color: #f2f2f2;
		border-radius: 30px;
	}
</style>